<template>
  <div class="cesium-viewer-wapper">
    <div id="cesium-viewer" />
    <viewerSettingSidebar top="35em" :viewerSource="viewerSource" />
    <div class="tool-box-top-left">
      <!-- <div class="select-box-wrapper"><select-box :options="flyOptions" style="margin-right: 0;" /></div> -->
      <div class="select-box-wrapper"><a-checkbox v-model:checked="viewModel.enabled">enabled</a-checkbox></div>
      <div class="select-box-wrapper"><a-checkbox v-model:checked="viewModel.glowOnly">glowOnly</a-checkbox></div>
      <div class="select-box-wrapper" title="contrast"><SliderBar v-model:value="viewModel.contrast" :min="-255" :max="255" :step="1">contrast</SliderBar></div>
      <div class="select-box-wrapper" title="brightness"><SliderBar v-model:value="viewModel.brightness" :min="-1.00" :max="2.00" :step="0.01">brightness</SliderBar></div>
      <div class="select-box-wrapper" title="stepSize"><SliderBar v-model:value="viewModel.stepSize" :min="1" :max="10" :step="1">stepSize</SliderBar></div>
      <div class="select-box-wrapper" title="delta"><SliderBar v-model:value="viewModel.delta" :min="1" :max="10" :step="1">delta</SliderBar></div>
      <div class="select-box-wrapper" title="sigma"><SliderBar v-model:value="viewModel.sigma" :min="0" :max="10" :step="0.1">sigma</SliderBar></div>
    </div>
    <GlobeRotater showTime :viewerSource="viewerSource" />
    <MousePosition show :viewerSource="viewerSource" />
  </div>
</template>

<script>
import * as Cesium from '@cesiumjs';
import { defineComponent, ref, reactive, watch, toRaw } from 'vue';
import { SelectBox, SliderBar } from '@components/widgets';
import { MousePosition, viewerSettingSidebar, GlobeRotater } from '@g3x/g3v/ui';
import { G3V } from '@g3x';
import { viewerMixin } from '@mixins';
// import merge from '@g3x/utils/merge';

const $g3vOptions = {
  defaultViewRectangle: G3V.defaultViews.global.china.rectangle,
  viewers: [
    {
      dom: 'cesium-viewer',
      name: 'viewer1',
      title: 'viewer#01',
      viewer: {
        imagery: { type: 'default', options: { brightness: 1, show: false } },
        imageryProvider: null,
        // terrain: { type: 'default', options: { requestVertexNormals: false, requestWaterMask: false } },
        terrainProvider: null,
        shadows: false,
        scene3DOnly: true,
        // sceneMode: Cesium.SceneMode.SCENE2D,
        animation: false
      },
      layers: [
        { type: 'arcgisImagery', options: { brightness: 1, show: false } },
        { type: 'tdtImage', options: { brightness: 1, show: false } },
        { type: 'tdtVector', options: { brightness: 1, show: false } },
        { type: 'tdtTerrain', options: { brightness: 1, show: false } },
        { type: 'osmImagery', options: { brightness: 1, show: false } },
        { type: 'arcgisStreetMap', options: { brightness: 1, show: false } },
        { type: 'bingMapsImagery', options: { brightness: 1, show: false } },
        { type: 'bingMapsAeriaAnno', options: { brightness: 1, show: false } },
        { type: 'bingMapsRoad', options: { brightness: 1, show: false } },
        { type: 'tdtIboMap', options: { brightness: 1, show: false } },
        { type: 'tdtImgAnno', options: { brightness: 1, show: false } },
        { type: 'tdtTerrainAnno', options: { brightness: 1, show: false } },
        { type: 'tdtVecAnno', options: { brightness: 1, show: false } },
        { type: 'tdtVecAnnoEn', options: { brightness: 1, show: false } },
        { type: 'darkMask', options: { brightness: 1, alpha: 0.8, show: true } },
        { type: 'graticule', options: { brightness: 1, show: true } }
      ],
      globe: {
        depthTestAgainstTerrain: false,
        enableLighting: true //启用以太阳为光源的地球
      },
      bottomContainer: false,
      navigation: {
        // defaultResetView: G3V.defaultViews.global.china.rectangle ,
        defaultResetView: null //flyHome
      },
      shortcutAction: false,
      hideLayers: false
    }
  ]
};

export default defineComponent({
  name: 'bloom', //
  mixins: [viewerMixin],
  components: { SelectBox, SliderBar, viewerSettingSidebar, GlobeRotater, MousePosition },
  props: {},
  setup() {
    const viewModel = reactive({
      enabled: true,
      glowOnly : false,
      contrast : 128,
      brightness : 0.1,
      stepSize : 5,
      delta : 1,
      sigma : 3.78,
    });
    return {viewModel};
  },
  data() {
    return {
      height: 0
    };
  },
  computed: {},
  watch: {},
  methods: {
    g3vOptionsGet(original) {
      // const g3vOptions = merge($g3vOptions, true);
      return $g3vOptions;
    },
    onViewerInited() {
      console.log('bloom onViewerInited');
    },
    initEffects() {
      const vm = this;
      const { viewer } = vm;
      const scene = viewer.scene;

      var tileset = new Cesium.Cesium3DTileset({
        url: '//zzgis.com/cdn/3d/3dtiles/bloom/tileset.json'
      });

      tileset.readyPromise
        .then(function(tileset) {
          scene.primitives.add(tileset);
          viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.0, -0.5, tileset.boundingSphere.radius * 2.0));
        })
        .otherwise(function(error) {
          console.error(error);
        });

      function updateBloom(){
        const viewModel = vm.viewModel;
        const bloom = scene.postProcessStages.bloom;
        bloom.enabled = viewModel.enabled;
        bloom.uniforms.glowOnly = viewModel.glowOnly;
        bloom.uniforms.contrast = viewModel.contrast;
        bloom.uniforms.delta = viewModel.delta;
        bloom.uniforms.brightness = viewModel.brightness;
        bloom.uniforms.stepSize = viewModel.stepSize;
        bloom.uniforms.sigma = viewModel.sigma;
      }

      watch(
        () => JSON.stringify(vm.viewModel),
        () => updateBloom()
      );
      updateBloom();

      watch(
        () => vm.height,
        height => {
          height = Number(height);
          if (isNaN(height)) {
            return;
          }
          var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
          var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
          var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height);
          var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
          tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
        }
      );
    }
  }
});
</script>

<style lang="less">
.cesium-viewer-wapper {
  .tool-box-top-left {
    min-width: 15em;
  }
}
</style>
